<!DOCTYPE html>
<html>
<head>
<style>
#main{width:80%;margin:0 auto;}
.comer{height:50px;background-color:red;margin:20px 0;}
.title{height:100px;width:100px;margin:0 auto;line-height:100px}
.comer-id{background-color:blue;width:1px;height:50px;}
.list{float:left;}
</style>
</head>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<body>
	<div id="main">
		<div class="title">
		hello world!
		</div>
		<div class="comer-list">
			<div class="list">1</div>
			<div class="comer"><div id="comer1" class="comer-id"><div class="info"></div></div></div>
		</div>
		<div class="comer-list">
			<div class="list">2</div>
			<div class="comer"><div id="comer2" class="comer-id"><div class="info"></div></div></div>
		</div>
		<div class="comer-list">
			<div class="list">3</div>
			<div class="comer"><div id="comer3" class="comer-id"><div class="info"></div></div></div>
		</div>
		<div class="comer-list">
			<div class="list">4</div>
			<div class="comer"><div id="comer4" class="comer-id"><div class="info"></div></div></div>
		</div>
		<div class="comer-list">
			<div class="list">5</div>
			<div class="comer"><div id="comer5" class="comer-id"><div class="info"></div></div></div>
		</div>
		<div class="comer-list">
			<div class="list">6</div>
			<div class="comer"><div id="comer6" class="comer-id"><div class="info"></div></div></div>
		</div>
		<div class="comer-list">
			<div class="list">7</div>
			<div class="comer"><div id="comer7" class="comer-id"><div class="info"></div></div></div>
		</div>
		<div class="comer-list">
			<div class="list">8</div>
			<div class="comer"><div id="comer8" class="comer-id"><div class="info"></div></div></div>
		</div>
		<div class="comer-list">
			<div class="list">9</div>
			<div class="comer"><div id="comer9" class="comer-id"><div class="info"></div></div></div>
		</div>
		<div class="comer-list">
			<div class="list">10</div>
			<div class="comer"><div id="comer10" class="comer-id"><div class="info"></div></div></div>
		</div>
	</div>
</body>
<script>
var socket = new WebSocket('ws://192.168.2.110:8282');
socket.onopen = function(event){
    var comer=new Array();
    var comer_id;
	socket.onmessage = function(event){
		str=event.data;
		var obj = eval('(' + str + ')');
		//更新数据
		if(obj.type=='login'){
			comer.push(obj);
		}else if(obj.type=='update'){
			comer_id=obj.id;
			for(i=0;i<comer.length;i++){
				if(comer[i].id==comer_id){
					comer[i].count=obj.count;
					break;
				}
			}
		}else if(obj.type=="closed"){
			comer_id=obj.id;
			console.log(obj)
			for(i=0;i<comer.length;i++){
				if(comer[i].id==comer_id){
					comer.splice(i,1);
					break;
				}
			}
		}
		//排序
		comer.sort(function(a,b){
			if(a.count<b.count){
				return 1;
			}else if(a.count>b.count){
				return -1;
			}else{
				return 0;
			}
		})
		//显示
		//console.log(comer);
		for(i=0;i<comer.length;i++){
			w=comer[i].count+"px";
			$("#comer"+(i+1)).width(w);
			$("#comer"+(i+1)).children(".info").html(comer[i].id);
			$("#comer"+(i+1)).children(".info").css("margin-left",w);
		}
	};
		
}	
</script>
</html>